<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="!form.uuid ? '新增' : '修改'"
               :close-on-click-modal="false"
               :visible.sync="visible">
        <el-form v-if="visible" ref="dataForm" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称"/>
            </el-form-item>
            <el-form-item label="IP" prop="ip">
                <el-input v-model="form.ip" placeholder="请输入IP"/>
            </el-form-item>
            <el-form-item label="端口" prop="port">
                <el-input v-model="form.port" placeholder="请输入端口号" v-number-input/>
            </el-form-item>
             <el-form-item label="账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" style="width:80%;margin-right:15px;"/>
                <el-button size="small" type="primary" @click="testClick">测试链接</el-button>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="visible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="dataFormSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {validateIP} from '~/utils/validate'
    import { serverEdit,testConnect } from "~/admin/api/server-deploy";

    export default {
        name: "serverDeployAdd",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 是否显示弹出层
                visible: false,
                form: {
                    uuid:'',
                    name: '',
                    ip: '',
                    port: '',
                    account:'',
                    password: ''
                },
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "名称不能为空", trigger: "blur"}
                    ],
                    ip: [
                        {required: true, message: "IP不能为空", trigger: "blur"},
                        {validator: (rule, value, callback)=>{
                           validateIP(rule, value, callback)
                            
                        }, trigger: "blur"}
                    ],
                    port: [
                        {required: true, message: "端口不能为空", trigger: "blur"}
                    ],
                    account: [
                        {required: true, message: "账号不能为空", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ],
                }
            }
        },
        created(){

        },
        methods: {
            
            testClick(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        testConnect(this.form).then(data => {
                            if(data.data.code == 0){
                                this.$message.success('连接成功！')
                            }else{
                                this.$message.error('连接失败！')
                            }
                            
                        },err=>{
                            this.$message.error('连接失败！')
                        })
                    }
                })
            },
            init(isEdit, data) {

                this.visible = true
                this.$nextTick(() => {
                    if (isEdit == 'edit') {
                        this.form = {
                            uuid: data.uuid,
                            name: data.name,
                            ip:  data.ip,
                            port:  data.port,
                            account: data.account,
                            password:  data.password,
                        }
                    } else {
                        this.form = {
                            uuid:'',
                            name: '',
                            ip: '',
                            port: '',
                            account:'',
                            password: ''
                        }
                    }
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        serverEdit(this.form).then(data => {
                            if(data.data.code == 0){
                                this.$message.success('保存成功！')
                                this.visible = false;
                                this.$emit('refreshDataList')
                            }else{
                                this.$message.error('保存失败！') 
                            }
                            
                        },err=>{
                            this.$message.error('保存失败！') 
                        })
                    }
                })
            },
           
        }
    }
</script>
